{include file="public/header"}

<body>
    <div class="layui-fluid">
        <div class="layui-row">
            <form action="" method="post" class="layui-form layui-form-pane">
                <div class="layui-card layui-form" lay-filter="component-form-element">
                    <div class="layui-card-header">类型</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <!-- <input type="radio" name="type" lay-filter="type" value="1" {if !empty($row.type) &&
                                $row.type==1}checked{/if} {if empty($row.type)}checked{/if} title="全国服务"> -->
                            <input type="radio" name="type" lay-filter="type" value="2" {if !empty($row.type) &&
                                $row.type==2}checked{/if} title="城市服务">
                            <input type="radio" name="type" lay-filter="type" value="3" {if !empty($row.type) &&
                                $row.type==3}checked{/if} title="区域服务">
                            <input type="radio" name="type" lay-filter="type" value="4" {if !empty($row.type) &&
                                $row.type==4}checked{/if} title="街道服务">
                        </div>
                    </div>
                </div>
                <div class="layui-card layui-form">
                    <div class="layui-card-header">选择商家</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <select name="businessid">
                                <option value="">请选择选择商家</option>
                                {foreach $shop as $v}
                                <option value="{$v.id}" {if !empty($row.businessid) &&
                                    $row.businessid==$v.id}selected{/if}>{$v.title}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-card layui-form" lay-filter="component-form-element" id="provinceshow" {if
                    !empty($row.type) && $row.type> 1} style="display:block"{else}style="display:none"{/if}>
                    <div class="layui-card-header">选择省份</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <select name="province" data-area="" lay-filter="province">
                                <option value="">请选择选择省份</option>
                                {foreach $province as $v}
                                <option value="{$v.area_code}" {if !empty($row.province) &&
                                    $row.province==$v.area_code}selected{/if}>{$v.name}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-card layui-form" lay-filter="component-form-element" id="cityshow" {if
                    !empty($row.type) && $row.type> 1} style="display:block"{else}style="display:none"{/if}>
                    <div class="layui-card-header">选择城市</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <select name="city" data-area="" lay-filter="city">
                                <option value="">请选择选择城市</option>
                                {foreach $city as $v}
                                <option value="{$v.area_code}" {if !empty($row.city) &&
                                    $row.city==$v.area_code}selected{/if}>{$v.name}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-card layui-form" lay-filter="component-form-element" id="areashow" {if
                    !empty($row.type) && $row.type> 2} style="display:block"{else}style="display:none"{/if}>
                    <div class="layui-card-header">选择区域</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <select name="area" data-area="" lay-filter="area">
                                <option value="">请选择选择城市</option>
                                {foreach $area as $v}
                                <option value="{$v.area_code}" {if !empty($row.area) &&
                                    $row.area==$v.area_code}selected{/if}>{$v.name}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-card layui-form" lay-filter="component-form-element" id="streetshow" {if
                    !empty($row.type) && $row.type> 3} style="display:block"{else}style="display:none"{/if}>
                    <div class="layui-card-header">选择街道</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <select name="street" data-area="" lay-filter="street">
                                <option value="">请选择选择街道</option>
                                {foreach $street as $v}
                                <option value="{$v.id}" {if !empty($row.street) && $row.street==$v.id}selected{/if}>
                                    {$v.name}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="hidden" value="{$row['id']|default='0'}" name="id" />
                    <button class="layui-btn" lay-submit="" lay-filter="add">提交</button>
                </div>
            </form>
        </div>
    </div>
    {include file="public/footer"}
    <script>
        layui.use(['form', 'layer', 'upload'], function () {
            $ = layui.jquery;
            var form = layui.form
                , upload = layui.upload
                , element = layui.element
                , layer = layui.layer;
            //图片上传
            var uploadInst = upload.render({
                elem: '#test1'
                , url: '/base/upload_img'
                , accept: 'images'
                , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    layer.load(); //上传loading
                }, progress: function (n, elem, res, index) {
                    element.progress('component-progress-demo', n + '%');
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.status == 1) {
                        layer.closeAll('loading'); //关闭loading
                        return layer.msg('图片上传失败，请重试');
                    }
                    if (res.status == 0) {
                        //上传成功
                        $('#demo1').attr('src', res.data.src); //图片链接（base64）
                        $('#covers').val(res.data.src);
                        layer.closeAll('loading'); //关闭loading
                        return layer.msg('图片上传成功');
                    }
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                    layer.closeAll('loading'); //关闭loading
                }
            });
            form.on('radio(type)', function (data) {
                var type = data.value;
                if (type == 1) {
                    $('#provinceshow').hide();
                    $('#cityshow').hide();
                    $('#areashow').hide();
                    $('#streetshow').hide();
                }
                if (type == 2) {
                    $('#provinceshow').show();
                    $('#cityshow').show();
                    $('#areashow').hide();
                    $('#streetshow').hide();
                }
                if (type == 3) {
                    $('#provinceshow').show();
                    $('#cityshow').show();
                    $('#areashow').show();
                    $('#streetshow').hide();
                }
                if (type == 4) {
                    $('#provinceshow').show();
                    $('#cityshow').show();
                    $('#areashow').show();
                    $('#streetshow').show();
                }
            });
            //监听省份选择
            form.on('select(province)', function (data) {
                if (!data.value) {
                    return false;
                }
                //发异步，把数据提交给php
                $.ajax({
                    type: 'get',
                    url: '/base/getregion',
                    data: { area_code: data.value, level: 2 },
                    success: function (res) {
                        if (res.status == 0) {
                            var str = '<option value="0">请选择城市</option>';
                            $.each(res.data, function (i, obj) {
                                str += '<option value="' + obj.area_code;
                                str += '">' + obj.name;
                                str += '</option>';
                            });
                            $('select[name="city"]').html(str);
                            $('select[name="area"]').html('');
                            $('select[name="street"]').html('');
                            form.render();
                        } else {
                            layer.msg(res.msg, { icon: 2, time: 1000 });
                        }
                    }
                });
                return false;
            });
            //监听城市选择
            form.on('select(city)', function (data) {
                if (!data.value) {
                    return false;
                }
                //选中状态发异步，把数据提交给php
                $.ajax({
                    type: 'get',
                    url: '/base/getregion',
                    data: { area_code: data.value, level: 3 },
                    success: function (res) {
                        if (res.status == 0) {
                            var str = '<option value="0">请选择区域</option>';
                            $.each(res.data, function (i, obj) {
                                str += '<option value="' + obj.area_code;
                                str += '">' + obj.name;
                                str += '</option>';
                            });
                            $('select[name="area"]').html(str);
                            $('select[name="street"]').html('');
                            form.render();
                        } else {
                            layer.msg(res.msg, { icon: 2, time: 1000 });
                        }
                    }
                });

                return false;
            });
            //监听区域选择
            form.on('select(area)', function (data) {
                if (!data.value) {
                    return false;
                }
                //选中状态发异步，把数据提交给php
                $.ajax({
                    type: 'get',
                    url: '/base/getregion',
                    data: { area_code: data.value, level: 4, isget: 1 },
                    success: function (res) {
                        if (res.status == 0) {
                            var str = '<option value="0">请选择街道</option>';
                            $.each(res.data, function (i, obj) {
                                str += '<option value="' + obj.id;
                                str += '">' + obj.name;
                                str += '</option>';
                            });
                            $('select[name="street"]').html(str);
                            form.render();
                        } else {
                            layer.msg(res.msg, { icon: 2, time: 1000 });
                        }
                    }
                });

                return false;
            });
            //监听提交
            form.on('submit(add)', function (data) {
                //发异步，把数据提交给php
                $.ajax({
                    type: 'post',
                    data: data.field,
                    success: function (res) {
                        if (res.status == 0) {
                            layer.msg(res.msg, { icon: 6, time: 1000 }, function () {
                                // 获得frame索引
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.location.reload();
                                parent.layer.close(index);
                            });
                        } else {
                            layer.msg(res.msg, { icon: 2, time: 1000 });
                        }
                    }
                });
                return false;
            });
        });
    </script>